import React from 'react';
import { Card, Breadcrumb, Button } from 'antd';
import { RedoOutlined } from '@ant-design/icons';
import Bing1 from '../../component/Bing';
import Zhu1 from '../../component/Zhu';
import '../../style/school.scss'
import pic1 from '../../assets/que.png'
import pic2 from '../../assets/mi.png'
import pic3 from '../../assets/zhonggao.png'
import pic4 from '../../assets/di.png'
import { useNavigate } from 'react-router-dom'


function SchoolNumber(props) {
    var navigate = useNavigate()
    var update = () => {
        navigate(0)
    }
    return (
        <div className='school'>
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href='/index/home'>
                        首页
                    </a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">行程管理</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <span>校园疫情数据</span>
                </Breadcrumb.Item>
                <Button icon={<RedoOutlined />} className="update" type='primary' onClick={update} />
            </Breadcrumb>
            <div className="header">
                <div className="box">
                    <img src={pic1} alt="" />
                    <div className='font'>
                        <p className='p1'>
                            现有确诊
                        </p>
                        <p className='p2'>
                            1
                        </p>
                    </div>
                </div>
                <div className="box">
                    <img src={pic2} alt="" />
                    <div className='font'>
                        <p className='p1 te'>
                            密切接触者
                        </p>
                        <p className='p2'>
                            5
                        </p>
                    </div>
                </div>
                <div className="box">
                    <img src={pic3} alt="" />
                    <div className='font'>
                        <p className='p1'>
                            中高风险地区返校
                        </p>
                        <p className='p2'>
                            10
                        </p>
                    </div>
                </div>
                <div className="box">
                    <img src={pic4} alt="" />
                    <div className='font'>
                        <p className='p1'>
                            低风险地区返校
                        </p>
                        <p className='p2 teshu'>
                            37
                        </p>
                    </div>
                </div>
            </div>
            <div className='nav'>
                <Card title="疫情数据(柱状图)" bordered={false} style={{ width: 600 }}>
                    <div className='zhutu'>
                        <Zhu1 />
                    </div>
                </Card>
                <Card title="疫情数据(饼图)" bordered={false} style={{ width: 600 }}>
                    <div className='bingtu'>
                        <Bing1 />
                    </div>
                </Card>
            </div>

        </div>
    );
}

export default SchoolNumber;